<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'map-page',
  data () {
    return {}
  },
  methods: {},
  mounted () {
    const map = new BMapGL.Map('container')
    const point = new BMapGL.Point(116.404, 39.915)
    map.centerAndZoom(point, 15)
    // 绘制圆
    const content = '宝山<br>85套'
    const label = new BMapGL.Label(content, {
      position: point,
      offset: new BMapGL.Size(10, 20)
    })
    map.addOverlay(label)
    label.setStyle({ // 设置label的样式
      color: '#000',
      fontSize: '16px',
      border: '2px solid #21b97a',
      width: '100px',
      height: '80px',
      borderRadius: '50%',
      backgroundColor: 'lime',
      textAlign: 'center',
      paddingTop: '20px'
    })
    label.addEventListener('click', function () {
      alert('您点击了标注')
    })
  }
}
</script>

<style scoped lang="less">
#container {
  height: 100vh;
}
</style>
